<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<title>-客服控制台</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script src="../js/xt.js"></script>
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/core.css" rel="stylesheet" type="text/css">

		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/css.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/bs/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<script src="js/plugins/sweetalert/sweetalert.min.js"></script>

	</head>

	<body class="bg-lightbule">
		<div class="col-sm-8 card-box m-10 p-20" id="app" style="width: 99%">
			<div style="margin-bottom: 10px;">
				<i class="fa fa-search m-r-5"></i> 客户：
				<small class="text-gray">（关键字，拼音字头，客户编号，电话号码，产品序列号）</small>
			</div>

			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容" v-model="input10" clearable>
						<el-button type="info" slot="append" @click="query">查询</el-button>
					</el-input>
				</el-col>

			</el-row>

			<div id="cuserchview">

				<div id="tiaojian" :style="mydiv2">
					<div>
						<ul class="nav nav-inverse pull-right ">

							<li class="active" id="label1">
								<a href="#" @click="clickmenu(1);" data-toggle="tab" id="label3">服务和投诉</a>
							</li>
							<li class="" id="label2">
								<a href="#" @click="clickmenu(5);" data-toggle="tab" id="label4">客户信息</a>
							</li>
						</ul>

						<h4><a class="ser130" href="">{{custName}}</a><span class="text-danger m-r-10">(客户负责人:{{useName}})</span></h4>
					</div>
					<div id="selmenu0" class="m-10">
						<a href="#" class="btn btn-link" @click="clickmenu(1);">
							<i class="md md-headset-mic m-r-5"></i>记录服务
						</a>
						<a href="#" class="btn btn-link" @click="clickmenu(2);">
							<i class="fa fa-warning  m-r-5"></i>记录投诉
						</a>

						<a v-if="orders.length === 0" href="#" class="btn btn-link" disabled="disabled">
							<i class="md  md-quick-contacts-dialer m-r-5"></i>记录维修
						</a>
						<a v-else href="#" class="btn btn-link" @click="clickmenu(3);">
							<i class="md  md-quick-contacts-dialer m-r-5"></i>记录维修
						</a>

						<!--<a href="#" class="btn btn-link" @click="clickmenu(4);">
							<i class="fa fa-plus m-r-5"></i>记录关怀
						</a>-->
					</div>

				</div>
				<div class="dddd" :style="mydiv">
					<hr size="1">

					<a v-for="(customer,i) in customers" href="#" v-if='i<=9' @click="queryMore(customer.cus_id,
					1,
					customer.cus_name,
					customer.use_name,'','','','')">·{{customer.cus_name}}<br></a>

					<span v-if="customers.length > 10">注意：关键字过短，查询结果多于10条。</span>
					<span v-else-if="customers.length === 0">没有找到符合条件的客户</span>

					<hr size="1"><b>电话号码</b>&nbsp;查询结果:<br>

					<a v-for="(customer,i) in phoneCust" href="#" v-if='i<=9' @click="queryMore(customer.cus_id,1,customer.cus_name,customer.use_name,'','','','')">·{{customer.cus_name}}<br></a>

					<dd v-if="phoneCust.length === 0" class="text-gray">没有找到该号码的客户或联系人。</dd>

					<hr size="1"><b>产品序列号</b>查询结果：<br>

					<dd v-for="(customer,i) in orders">
						{{customer.orderform.otitle}}<br />【产品：
						<span v-for="(order,i) in customer.orderdetail" @click="queryMore(customer.orderform.cus_id,
						3,
						customer.orderform.cus_name,
						customer.orderform.use_name,
					order.goo_id,
					order.goo_name,
					customer.orderform.o_id,
					customer.orderform.otitle)" style="cursor: pointer;">
							{{order.goo_name}})<br />&nbsp;&nbsp;&nbsp;
						</span> 】
						<br />
					</dd>

					<span v-if="orders.length === 0">没有找到符合条件需要维修的订单及产品</span>
					<hr>

				</div>

				<div :style="mydiv1">
					<iframe :src="mysrc" width="1200px" height="900px" id="Box" frameborder="0" scrolling="0"></iframe>
				</div>

			</div>

		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					input10: '',
					mydiv: {
						display: 'none'
					},
					mydiv1: {
						display: 'none'
					},
					mydiv2: {
						display: 'none'
					},
					mysrc: '',
					customers: [], //模糊查询客户
					phoneCust: [], //根据电话号码查询客户
					orders: [], //订单
					custId: '', //客户id
					custName: '', //客户id
					useName: '',

				},
				methods: {
					query() {

						var isson = this;
						//post提交数据
						axios.post("/queryMesssage",
							//参数转换
							Qs.stringify({
								"msg": this.input10
							}, {
								arrayFormat: 'brackets'
							})

						).then(function(v) {

							isson.customers = v.data.likeCust;

							isson.phoneCust = v.data.likePhone;
							isson.orders = v.data.orders;
							console.log(v.data);

							isson.mydiv1.display = 'none';
							isson.mydiv2.display = isson.mydiv1.display;
							isson.mydiv.display = 'block';

						}).catch(function(e) {
							//alert("出错了" + e);
						});

					},
					queryMore(custId, i, custName, useName, goodId, goodName, orderId, orderName) {
						//alert(custId);
						this.custId = custId;
						this.custName = custName;
						this.useName = useName;
						this.mydiv1.display = 'block';
						this.mydiv.display = 'none';
						this.mydiv2.display = this.mydiv1.display;
						this.mysrc = "/queryCustId?custId=" + custId + "&i=" + i +
							"&orderId=" + orderId + "&orderName=" + orderName +
							"&goodId=" + goodId + "&goodName=" + goodName;
					},
					clickmenu(i) {
						//alert(this.custId);
						this.mydiv1.display = 'block';
						this.mydiv.display = 'none';
						this.mydiv2.display = this.mydiv1.display;
						this.mysrc = "/queryCustId?custId=" + this.custId + "&i=" + i;
					}
				},
				mounted() {

				}
			});
		</script>
	</body>

</html>